import React, {Component, Fragment} from 'react';
import {Table, Divider, Tag, Button} from 'antd';
import PropTypes from 'prop-types';
import './RoleTableList.scss';

class RoleTableList extends Component {
  state = {
    columns: [

      {
        title: '角色ID',
        dataIndex: 'group_id',
        key: 'group_id'
      },
      {
        title: '角色名称',
        dataIndex: 'group_name',
        key: 'group_name'
      },
      {
        title: '拥有权限',
        key: 'ids_name',
        dataIndex: 'ids_name',
        render: tags => {
          let temp = JSON.parse(tags);
          return temp && temp.map(tag => {
            const colorArr = ['magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'];

            return <Tag
              color={colorArr[Math.floor(Math.random() * 11)]}
              key={tag}>
              {tag}
            </Tag>;
          });
        }
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => {
          const {roleEdit} = this.props;
          return <div className='actionGroup'>
            <Button size='small' onClick={() => roleEdit(record)} disabled={record.is_true !== 1}>编辑</Button>
            <Button
              size='small'
              onClick={() => this.props.isEnabledTemp(record)}
              type={record.is_true === 1 ? 'primary' : 'danger'}
            >
              {record.is_true === 1 ? '禁用' : '启用'}
            </Button>
            {/*<Button size='small' type='danger' onClick={() => this.roleDel(record)}>删除</Button>*/}
          </div>;
        }
      }
    ]
  };

  static propTypes = {
    roleListData: PropTypes.array,
    roleEdit: PropTypes.func,
    isEnabledTemp: PropTypes.func
  };
  // 删除
  roleDel = data => {
    console.log(data);
  };

  render() {
    const {columns} = this.state;
    const {roleListData: data} = this.props;
    return (
      <div className='roleTableList'>
        <Table columns={columns} dataSource={data} pagination={false}/>
      </div>
    );
  }

}

export default RoleTableList;
